<template>
    <el-row :gutter="20">
        <el-col :span="22" :offset="1">
            <el-card class="novel-card">
                <div slot="header" class="clearfix novel-head">
                    <h1>{{title}}</h1>
                </div>
                <div class="novel-chapters" v-loading.body="loading" element-loading-text="拼命加载中">
                    <div v-for="chapter in chapters"  >
                        <el-col :span="6"><router-link :to="{ path: '/chapter/' + chapter.chapter_id}"><div class="novel-chapter">{{chapter.title}}</div></router-link></el-col>
                        <el-col :span="6"><router-link :to="{ path: '/chapter/' + chapter.chapter_id}"><div class="novel-chapter">{{chapter.title}}</div></router-link></el-col>
                        <el-col :span="6"><router-link :to="{ path: '/chapter/' + chapter.chapter_id}"><div class="novel-chapter">{{chapter.title}}</div></router-link></el-col>
                        <el-col :span="6"><router-link :to="{ path: '/chapter/' + chapter.chapter_id}"><div class="novel-chapter">{{chapter.title}}</div></router-link></el-col>
                        <el-col :span="6"><router-link :to="{ path: '/chapter/' + chapter.chapter_id}"><div class="novel-chapter">{{chapter.title}}</div></router-link></el-col>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<style lang="css" rel="stylesheet/css">
.novel-card, .novel-chapters {
    background-color:#F9FAFC;
    width:100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  clear: both;
}
.novel-head {
    text-align:center;
}
.novel-chapters{
    min-height:300px;
}
.novel-chapter {
    text-align:center;
    color:#1F2D3D;
    font-size: 14px;
    height:38px;
    line-height:38px;
    margin-bottom:5px;
}
</style>

<script type="text/babel">
    export default{
        data(){
            return{
                title: '',
                chapters: [],
                style: '',
                auth: '',
                introduction: '',
                loading:true
            }
        },
        mounted:function() {
            var _this = this
            var id = _this.$route.params.id
            if (id <= 0) {
                console.log("error novel_id")
                //todo 退回上一页
            }
            _this.$http.get("http://novel.nightc.com/v1/novel/" + id).then((response) => {
                var body = response.body
                if (body.code != undefined && body.code == 0) {
                    _this.title = body.data.title
                    _this.auth = body.data.auth
                    _this.introduction = body.data.introduction
                    _this.style = body.data.style
                    _this.chapters = body.data.chapters
                    _this.loading = false
                } else {
                    console.log(body)
                }
            })
        }
    }
</script>
